@if (allowIntrospection() && docView(); as docView) {
  <div #docViewer class="app-doc-viewer">
    @if (isLoading()) {
      <div
        class="app-doc-loader"
        animate.enter="animate animate-fade-in"
        animate.leave="animate animate-fade-out"
      >
        <div class="app-doc-loader-content">
          <img
            src="assets/img/logo.svg"
            alt=""
            class="anim"
            [ngClass]="{ 'anim-rotate': isLoading() }"
          />
          {{ 'LOADING_INDICATOR_TEXT' | translate }}
        </div>
      </div>
    }
    <div class="doc-viewer-header">
      <div class="doc-viewer-navigation">
        <div class="doc-viewer-navigation--left">
          @if (docView.view !== 'root' && docHistory().length) {
            <div
              class="doc-viewer-navigation__option"
              (click)="goBack()"
              track-id="go_back_docs"
            >
              <app-icon name="arrow-left" />
              <span>{{ 'DOCS_GO_BACK_TEXT' | translate }}</span>
            </div>
          }
          @if (docView.view !== 'root') {
            <div class="doc-viewer-navigation__option" (click)="goHome()">
              <app-icon name="home" />
            </div>
          }
        </div>
        <div class="doc-viewer-navigation--right">
          <div
            nz-dropdown
            nzTrigger="click"
            [nzDropdownMenu]="docViewerMenu"
            class="doc-viewer-navigation__option"
          >
            <app-icon name="more-horizontal" />
          </div>
          <nz-dropdown-menu #docViewerMenu="nzDropdownMenu">
            <ul nz-menu>
              @if (gqlSchema()) {
                <li nz-menu-item (click)="exportSDL()">
                  {{ 'DOCS_EXPORT_SDL' | translate }}
                </li>
              }
              <li nz-menu-item (click)="loadSchemaChange.emit()">
                {{ 'DOCS_LOAD_SCHEMA' | translate }}...
              </li>
            </ul>
          </nz-dropdown-menu>
          <div
            class="doc-viewer-navigation__option"
            (click)="toggleDocsChange.emit()"
          >
            <app-icon name="x" />
          </div>
        </div>
      </div>
    </div>
    <div class="doc-viewer-search-wrapper">
      <input
        class="input"
        nz-input
        #autocompleteInput
        [placeholder]="'DOCS_SEARCH_INPUT_PLACEHOLDER_TEXT' | translate"
        [(ngModel)]="searchTerm"
        (input)="debouncedFilterAutocompleteOptions($event)"
        (keyup.enter)="searchDocs(autocompleteInput.value)"
        [nzAutocomplete]="auto"
      />
      <nz-autocomplete
        #auto
        nzBackfill
        [nzDefaultActiveFirstOption]="false"
        (selectionChange)="searchDocs(autocompleteInput.value)"
      >
        @for (option of autocompleteOptions(); track $index) {
          <nz-auto-option [nzValue]="option" [nzLabel]="option.search">
            <div class="doc-viewer-autocomplete-item">
              {{ option.search }}
              <span class="doc-viewer-autocomplete-item-field">{{
                option.cat
              }}</span>
              <span class="doc-viewer-autocomplete-item-description">{{
                option.description
              }}</span>
            </div>
          </nz-auto-option>
        }
      </nz-autocomplete>
    </div>
    <div class="doc-viewer-items">
      @if (gqlSchema()) {
        <div>
          @switch (docView.view) {
            @case ('root') {
              <div class="mb-40">
                <div class="doc-viewer-section-title">
                  {{ 'DOCS_ROOT_TYPES_TEXT' | translate }}
                </div>
                @for (item of rootTypes(); track item.name) {
                  <div class="doc-viewer-item">
                    @if (item) {
                      <span class="no-link-link" (click)="goToType(item.name)">{{
                        item.name
                      }}</span>
                    }
                  </div>
                }
              </div>
              @if (directives().length) {
                <div class="mb-40">
                  <div class="doc-viewer-section-title">
                    {{ 'DOCS_DIRECTIVES_TEXT' | translate }}
                  </div>
                  @for (item of directives(); track directiveTrackBy($index, item)) {
                    <div class="doc-viewer-item">
                      <span class="no-link-link" (click)="goToDirective(item.name)">
                        {{ '@' }}{{ item.name }}
                      </span>
                    </div>
                  }
                </div>
              }
            }
            @case ('type') {
              @if (typeData()) {
                <app-doc-viewer-type
                  [data]="typeData()"
                  [gqlSchema]="gqlSchema()"
                  [sortByOption]="sortFieldsByOption"
                  [hideDeprecatedDocItems]="hideDeprecatedDocItems()"
                  (goToFieldChange)="goToField($event.name, $event.parentType)"
                  (goToTypeChange)="goToType($event.name)"
                  (addToEditorChange)="addToEditor($event.name, $event.parentType)"
                  (sortFieldsByChange)="setSortFieldsByOption($event)"
                />
              }
            }
            @case ('field') {
              @if (
                !(hideDeprecatedDocItems() && getField(docView)?.isDeprecated) &&
                docView.view === 'field'
              ) {
                <app-doc-viewer-field
                  [data]="getField(docView)"
                  [gqlSchema]="gqlSchema()"
                  [parentType]="docView.parentType"
                  [sortByOption]="sortFieldsByOption"
                  [hideDeprecatedDocItems]="hideDeprecatedDocItems()"
                  (goToFieldChange)="goToField($event.name, $event.parentType)"
                  (goToTypeChange)="goToType($event.name)"
                  (addToEditorChange)="addToEditor($event.name, $event.parentType)"
                  (sortFieldsByChange)="setSortFieldsByOption($event)"
                />
              }
            }
            @case ('directive') {
              @if (docView.view === 'directive' && getDirective(docView)) {
                <app-doc-viewer-directive
                  [data]="getDirective(docView)"
                  [gqlSchema]="gqlSchema()"
                  (goToTypeChange)="goToType($event.name)"
                />
              }
            }
            @case ('search') {
              <app-doc-viewer-search-results
                [results]="searchResult()"
                (goToFieldChange)="goToField($event.name, $event.parentType)"
                (goToTypeChange)="goToType($event.name)"
                (goToDirectiveChange)="goToDirective($event.name)"
              />
            }
          }
        </div>
      }
    </div>
  </div>
}
@if (gqlSchema() && lastUpdatedAt()) {
  <div class="doc-viewer__last-updated">
    {{ 'DOCS_LAST_UPDATED' | translate }}: {{ lastUpdatedAt() | date: 'medium' }}
  </div>
}
@if (!allowIntrospection()) {
  <div class="app-doc-notice">
    {{ 'SERVER_NO_INTROSPECTION_SUPPORT' | translate }}
  </div>
}
